<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/vant@2.12.54.css" />
    <link rel="stylesheet" href="./css/product.css" />
    <link rel="stylesheet" href="./css/nav.css" />
</head>
<body>
    <div class="product" id="app">
        <div class="nav">
            <ul class="list">
                <li class="item" @click="goToindex">
                  <img src="./img/ico1.png" alt="" >
                  <span>首页</span>
                </li>
                <li class="item art" @click="goToproduct">
                  <img src="./img/ico2_2.png" alt="" >
                  <span>产品列表</span>
                </li>
                <li class="item" @click="goTovideo">
                  <img src="./img/ico3.png" alt="" >
                  <span>视频介绍</span>
                </li>
                <li class="item" @click="goTocontactus">
                  <img src="./img/ico4.png" alt="" >
                  <span>联系我们</span>
                </li>
            </ul>
          </div>

        <div class="search">
            <div class="inp">
                <img src="./img/search.png" alt="">
                <input type="text" name="" id="" placeholder="请输入搜索内容" v-model="keyword"  @keyup.enter="search">
            </div>
        </div>
        <div class="list_1">
            <van-tree-select :items="items" @click-nav="clickNav" :main-active-index.sync="active">
                <template #content>
                    <!-- <van-image
                    v-if="active === 1"
                    src="https://img01.yzcdn.cn/vant/apple-1.jpg"
                    /> -->
                    
                    <ul class="list">
                        <li class="item" v-for="item in goodsLists"  @click="goTodetails(item.goods_id)">
                            <div class="iamge">
                                <img :src="item.image.file_path" alt="">
                            </div>
                            <div class="text">
                                <h6 class="f16">{{item.goods_name}}</h6>
                                <p class="f14">{{item.sku}}</p>
                            </div>
                        </li>
                        
                    </ul>
                </template>
            </van-tree-select>
        </div>
    </div>

</body>
<script src="./js/vue@2.7.14.js"></script>
  <script src="./js/element-ui@2.15.14.js"></script>
  <script src="./js/axios@1.5.0.min.js"></script>
  <script src="./js/vant@2.12.54.min.js"></script>
  <script src="./js/request.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
            active: 0,
            items: [],
            category_id:null,
            goodsLists:[],
            keyword:''
            
        };
      },
      mounted() {
        this.categoryList();
      },


     
      methods:{
           //获取产品分类数据
           categoryList() {
            const url = baseUrl + "/goods.Goods/categoryList";
            axios({
                url: url,
                method: "post",
                params: {
                app_id: 10001,
                },
            })
                .then((res) => {
                // 处理响应结果
                let index = this.active;
                this.items = res.data.data.list;
                this.category_id = res.data.data.list[index].category_id;
                // console.log("category_id",this.category_id);
                this.fetchData();
                })
                .catch((error) => {
                // 处理错误
                console.error(error);
                });
            },
            //点击分类时触发
            clickNav(node){
                // const categoryId = node.category_id;
                // console.log(categoryId);
                console.log(node);
                this.active = node;
                this.categoryList();
                
            },
            //获取产品列表数据
            fetchData() {
            const url = baseUrl + "/goods.Goods/goodsLists";
            const category_id = this.category_id;
            const keyword = this.keyword;
            // console.log("category_id-111111",category_id);
            axios({
                url: url,
                method: "post",
                params: {
                app_id: 10001,
                category_id:category_id,
                keyword:keyword
                },
            })
                .then((res) => {
                // 处理响应结果
               
                // this.items = res.data.data.list;
                this.goodsLists = res.data.data.list;
                // console.log(res.data.data.list);
                })
                .catch((error) => {
                // 处理错误
                console.error(error);
                });
            },
            //搜索
            search() {
            const url = baseUrl + "/goods.Goods/goodsLists";
            const keyword = this.keyword;
            // console.log("category_id-111111",category_id);
            axios({
                url: url,
                method: "post",
                params: {
                app_id: 10001,
                category_id:"",
                keyword:keyword
                },
            })
                .then((res) => {
                // 处理响应结果
               
                this.goodsLists = res.data.data.list;
                })
                .catch((error) => {
                // 处理错误
                console.error(error);
                });
            },
            goTocontactus(){
                window.location.href = "contactus.html";
            },
            goToindex(){
                window.location.href = "index.html";
            },
            goToproduct(){
                window.location.href = "product.html";
            },
            goTovideo(){
                window.location.href = "video.html";
            },
            goTodetails(id) {
                window.location.href = "product_details.html?id=" + id;
            }

            
        }
    })
    Vue.use(vant);
  </script>

</html>